<template>
  <div class="status">
    <div class="equip">
      <div class="name">设备状态</div>
      <div class="value">停机</div>
    </div>
    <div class="equip" v-for="(item, key) in data.equips" :key="key">
      <div class="name">{{ key.toUpperCase() }}</div>
      <div :class="['value', item == 1 ? 'con' : 'un-con']">
        {{ item == 1 ? "已连接" : "未连接" }}
      </div>
    </div>
  </div>
</template>
<script setup>
defineProps({
  data: Object,
  default: () => {},
});

let status = ["待机", "停止", "报警", "自动运行", "初始化"];

function getStatus(type) {
  return status[type];
}
</script>
<style scoped lang="scss">
.status {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 5px;
  .equip {
    width: 46%;
    height: 40px;
    background: linear-gradient(270deg, #0084fe 0%, #004b90 100%);
    display: flex;
    align-items: center;
    font-size: 16px;
    margin-bottom: 5px;
    &:nth-child(odd) {
      margin-right: 10px;
    }
    > div {
      flex: 1;
      height: 30px;
      line-height: 30px;
    }
    .name {
      color: #fff;
      border-left: 5px solid #00feef;
      padding-left: 5px;
    }
    .value,
    .con {
      color: #00feef;
    }
    .un-con {
      color: red;
    }
  }
}
</style>
